<template>
    <div>
        <!-- 操作数组 -->
        <ul>
            <li v-for="(item, index) in nameArr" :key="index">{{ item }}</li>
        </ul>
        <p><button @click="editname">修改唐三藏</button></p>

        <hr />
        <!-- 操作对象 -->
        <p @click="delAge">{{ user.name }}--{{ user.age }} -- {{ user.sex }}</p>
    </div>
</template>

<script setup>
// 语法糖写法:
// 测试vue2无法监听 对象属性的添加删除 和数组下标修改数据

import { ref, reactive } from 'vue'

const nameArr = ref(['唐三藏', '孙悟空', '天蓬元帅', '卷帘大将']);
console.log('nameArr', nameArr);
const editname = () => {
    nameArr.value[0] = '金蝉子'
}

const user = reactive({
    name: '须菩提',
    age: 100
})


const addSex = () => {
    user.sex = '男'
}

const delAge = () => {
    delete user.age
}





</script>
<style scoped></style>